// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StockChart from './StockChart.js';

// css OR less预编译器
import styles from './Forecast.less';

// 图片

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/6/10
 */

@connect(({ forecast, loading }) => ({
  forecast,
  loading: loading.models.forecastRule,
}))
@Form.create()
class Forecast extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/6/10
   */

  state = {
    index: 0,
  };

  changeIndex(s) {
    this.setState({
      index: s,
    });
  }

  /**
   *  Describe:视图
   *  Created by xjc on 2019/6/10
   */

  render() {
    const {
      forecast: { chartData },
    } = this.props;
    const { index } = this.state;
    const list = [];
    let chartDataNow = [];
    let middleDateNow = [];
    if (chartData.length !== 0) {
      chartDataNow = chartData.predictionList[0].concat(chartData.laterList[index]);
      middleDateNow = chartData.middleDates[0];

      for (let i = 1; i < chartData.predictionList.length; i++) {
        list.push(
          <Col md={8} sm={24}>
            <Card
              hoverable
              bodyStyle={{ padding: '12px 4px' }}
              style={{ width: '98%', marginTop: '3%', marginLeft: '1%', marginBottom: '3%' }}
              onClick={this.changeIndex.bind(this, i - 1)}
            >
              <StockChart
                chartData={chartData.predictionList[i]}
                middleDate={chartData.middleDates[i]}
                fontHas={false}
                height={350}
              />
              <div style={{ textAlign: 'center', marginLeft: '2%', fontWeight: '600' }}>
                {`${String.fromCharCode(i + 64)} 相似度:${chartData.middleDates[i].similar}`}
              </div>
            </Card>
          </Col>
        );
      }
    }

    return (
      <PageHeaderWrapper title="股票预测">
        <Card bodyStyle={{ padding: '12px' }}>
          <div style={{ width: '96%', height: '500px', marginLeft: '2%' }}>
            {chartData.length === 0 ? (
              <div
                style={{
                  textAlign: 'center',
                  borderRadius: 4,
                  marginBottom: 20,
                  marginTop: 20,
                  padding: '30 50',
                  margin: '20 20',
                }}
              >
                {' '}
                <Spin size="large" />{' '}
              </div>
            ) : (
              <div>
                <div
                  style={{
                    width: '96%',
                    marginLeft: '2%',
                    marginTop: '1%',
                    marginBottom: '1%',
                    fontWeight: '700',
                    fontSize: '20px',
                  }}
                >
                  {chartDataNow[0].code}
                </div>
                <StockChart
                  chartData={chartDataNow}
                  middleDate={middleDateNow}
                  fontHas
                  height={450}
                />
                <div
                  style={{
                    textAlign: 'center',
                    marginLeft: '-1%',
                    fontWeight: '600',
                    fontSize: '1rem',
                  }}
                >
                  {`${String.fromCharCode(index + 65)} 相似度:${
                    chartData.middleDates[index + 1].similar
                  }`}
                </div>
              </div>
            )}
          </div>
          <br />
          <Row>{list}</Row>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;

    /* 导入列表数据 */
    dispatch({
      type: 'forecast/GetChartData',
      payload: {},
      callback: res => {},
    });
  }

  componentWillUnmount() {}
}

export default Forecast;
